import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
// 引入slice,获取slice的actions
import slice, { addAsync } from '../../redux/slice'
import './Header.css'
const { addTodo } = slice.actions
export default function Header() {
  const dispatch = useDispatch()
  const flag = useSelector((state) => {
    return state.zs.flag
  })
  return (
    <div className="todo-header">
      <input
        type="text"
        onKeyUp={(e) => {
          const value = e.target.value.trim()
          if (e.key !== 'Enter' || !value) return

          //修改数据
          // dispatch(addTodo(value)) //同步添加

          dispatch(addAsync(value)) // 异步添加

          //清空文本框
          e.target.value = ''
        }}
      />
      {/* flag为true,则loading展示,flag为false,则loading隐藏 */}
      {flag && <div>loading...</div>}
    </div>
  )
}
